<template>
	<MyPage title="我的钱包" :isback="true" color="#fff" :isbg="false">
		<view slot="right"><u-button :plain="true" size="mini" class="header-btn" @click="$utils.navigateTo('/wallet/bill')">账单</u-button></view>
		<view slot="gBody"  >
			<view class="yellow-bg"></view>
			<view class="wallet-main"   style="padding-top: 80rpx;">
				<!-- 余额 -->
				<view class="wallet-card" >
					<view class="card-top">
						<view class="left">
							<text>余额</text>
							<view class="money">￥<text>{{money}}</text></view>
						</view>
						<view class="right"><u-icon name="lock-fill" color="#e9a81e" size="20"></u-icon>安全保障中</view>
					</view>
					<view class="card-bottom">
						<text @click="integralShow=true">积分：{{integral}}</text>
						<!-- <text @click="$utils.navigateTo('/wallet/coupon')" style="margin-left:80rpx">优惠券：{{coupon}}</text> -->
					</view>
				</view>
				<!-- 积分弹框 -->
				<u-modal v-model="integralShow" content="积分系统即将开启，敬请期待!"></u-modal>
				<!-- 活动 -->
				<view class="notice-box">
					<u-notice-bar type="warning" border-radius="20" :more-icon="true" :list="newsList" @click="$utils.navigateTo('/vip/index')"></u-notice-bar>
				</view>
				<!-- 充值 -->
				<template v-if="appleShow">
					<view class="title"><text class="right grey" @click="$utils.navigateTo('/wallet/withdrawal')">提现></text>充值</view>
					<view class="recharge-box">
						<view
							class="recharge-list"
							v-for="(item,index) in rechargeList"
							:key="index"
							:class="{'cur':rechargeIndex==index}"
							@click="rechargeIndex=index"
						>￥{{item}}</view>
					</view>
					<view class="grey agreement">充值即代表同意<text class="grey" @click="$utils.navigateTo('/agreement/agreement',{id:54})">《零钱服务协议》</text></view>
					<u-button type="warning" shape="circle" class="btn" @click="rechargeSubmit">立即充值</u-button>
				</template>
			</view>
		</view>
	</MyPage>
</template>		

<script>
import mixin from "@/libs/mixin.js";
import { getWalletInfo } from '@/api/wallet.js'
export default {
	mixins: [mixin],
	data() {
		return {
			appleShow: true,
			money: "0.00",
			integral: 0,
			integralShow: false,
			coupon: 0,
			newsList: [],
			rechargeIndex: 1,
			rechargeList: []
		}
	}, 
	onLoad() {
		//检测当前平台，如果是苹果系统，隐藏充值
		uni.getSystemInfo({  
			success:(res) => {  
				if(res.platform=="ios" || res.platform=="mac"){  
					this.appleShow = false;
				}
			}
		});
		if(!this.$store.state.app.token){
			this.$utils.redirectTo('/pages/login/login',{
				title:"登录",
				subTitle:"请先登录",
				btnValue:"请先登录",
				url:'/login/login'
			});
		}else{
			this.getData();
		}
	}, 
	methods: {
		rechargeSubmit(){
			this.$utils.navigateTo('/wallet/recharge',{money:this.rechargeList[this.rechargeIndex]});
		},
		//获取钱包数据
		getData(){ 
			getWalletInfo({token:this.$store.state.app.token}).then(res=>{
				this.rechargeList = res.list;
				this.integral = res.integral;
				this.money = res.money;
				this.newsList = res.newsList;
			}).catch(err=>{
				uni.showToast({
					title: err.msg,
					icon:'none'
				})
			});
		}
	}
}
</script>

<style lang="scss">
page{
	background:#f3f3f3;
}
</style>
<style lang="scss" scoped>
.header-btn{
	border:1px #fff solid;
	background:none;
	color:#fff;
	opacity: .8;
}
.yellow-bg{
	height:350rpx;
	border-radius: 0 0 65rpx 65rpx;
	background:linear-gradient(to right,#eeb115,#c17306);
}
.wallet-main{
	position:relative;
	z-index:2;
	padding:40rpx;
	margin-top:-250rpx;
	.wallet-card{
		padding: 35rpx 50rpx 30rpx;
		border-radius: 25rpx;
		background:#fff;
		.card-top{
			overflow: hidden;
			.left{
				font-size:30rpx;
				.money{
					font-size:40rpx;
					text{
						margin-left:10rpx;
						font-size:58rpx;
						font-weight: bold;
					}
				}
			}
			.right{
				margin-top:14rpx;
				height:50rpx;
				line-height:45rpx;
				padding:0 20rpx;
				font-size:24rpx;
				white-space: nowrap;
				text-align: center;
				border-radius: 30rpx;
				color:#e9a81e;
				border:1px #e9a81e solid;
				.u-icon{
					margin-right:8rpx;
					vertical-align: initial;
				}
			}
		}
		.card-bottom{
			margin-top:20rpx;
			padding: 20rpx 0 5rpx;
			border-top:1px #eee solid;
			font-size:28rpx;
		}
	}
	.notice-box{
		margin-top:30rpx;
	}
	.title{
		margin-top:65rpx;
		font-size:34rpx;
		line-height: 45rpx;
		.grey{
			font-size: 26rpx;
		}
	}
	.recharge-box{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		text-align: center;
		margin-top: 18rpx;
		.recharge-list{
			width:32%;
			height:140rpx;
			line-height:140rpx;
			margin-bottom:15rpx;
			background: #fff;
			border:1px #ddd solid;
			border-radius: 20rpx;
			font-size:38rpx;
			&.cur{
				color:#c78706;
				background: #fff9ee;
				border-color:#e9a81e;
			}
		}
	}
	.agreement{
		margin-top:10rpx;
		font-size:24rpx;
	}
	.btn{
		margin-top:55rpx;
		background:linear-gradient(to right,#eeb115,#c17306);
		color: #fff!important;
		border: none;
	}
}
</style>